// 导入 Vue 构造函数
import Vue from "vue";
// 导入 Vuex 构造函数
import Vuex from "vuex";

import getters from "./getters";
// 导入三个子模块
import app from "./modules/app";
import settings from "./modules/settings";
import user from "./modules/user";
import route from "./modules/route";
import tagsView from "./modules/tagsView";
import createPersisitedState from "vuex-persistedstate";

Vue.use(Vuex);

const store = new Vuex.Store({
    modules: {
        app,
        settings,
        user,
        route,
        tagsView,
    },
    getters,
    plugins: [
        // 使用让 vuex 数据持久化的插件，传入配置
        createPersisitedState({
            // 本地存储键名 localStorage,setItem('hrsass-23'，vuex下的state数据)
            key: "hrsass",
            // 哪些模块下的数据需要持久化
            //些模块下的数据需要持久化
            //使用这个插件的好处:
            // 1自动把vuex中的数据同步到localStorage-份
            // 2，当我们刷新页面的时候，自动的把LcalStorage的数据赋值给vuex中的数据
            // 3，每当vuex中的数据发生变了，也会自动地把最新的vuex数据同步到localStorage
            paths: ["app", "settings"],
        }),
    ],
});

export default store;

// token为什么同时用vuex和本地存储公共管理?
/**
 * 存储在Vuex中的数据的好处：
 *  1响应式
 *  2读取速度快（从内存中直接读取）
 * 存储在Vuex中的数据的缺点：
 *  1刷新会丢失
 */
/**
 * 存储在localStorage中数据的好处：
 *  1刷新不会丢失
 * 存储在localStorage中数据的缺点：
 *  1非响应式
 *  2读写速度慢（从磁盘中读写，操作文件慢）
 */